<template>
	<sl-page title=" " customStyle="background: #FFFFFF !important;">
		<view class="search-box">
			<view  class="search-input-wrapper">
				<uni-easyinput prefixIcon="search" confirmType="search" v-model="searchValue" :inputBorder="false" placeholder="请输入关键字搜索..."
					:placeholderStyle="placeholderStyle" :styles="styles" maxlength=20 @confirm="onSearch">
				</uni-easyinput>
			</view>
			<view  class="calce-button" @click="clearInput()">取消</view>
		</view>
		<view class="history" v-if="historySearch.length">
			<view class="flex flex-x-between">
				<view class="flex flex-y-center px-1 f-w f-30">
					历史搜索
				</view>
				<view class="flex flex-y-center px-1">
					<view class="" @click="clearSearch()">
						<uni-icons type="trash"></uni-icons>
					</view>
				</view>
			</view>
			<view class="his-list">
				<view class="his-item" v-for="(val, index) in historySearch" :key="index">
					<view class="history-button" @click="handleQuick(val)">{{ val }}</view>
				</view>
			</view>
		</view>
	</sl-page>
</template>

<script>
	import {
		tooLong
	} from '@/utils/verify.js';
	//
	const HISTORY_SEARCH = 'historySearch';
	//
	export default {
		data() {
			return {
				options: {},
				historySearch: [],
				//查询框扩展
				styles: {
					// color: '#2979FF',
					// borderColor: '#ff0b17',
				},
				searchValue: '',
				placeholderStyle: 'color:#A6A6A6;font-size:28rpx',
			};
		},
		//
		onLoad(options) {
			this.options = options;
			console.log('this.options',this.options)
			this.historySearch = this.getHistorySearch();
		},
		//
		methods: {
			/**
			 * 获取历史搜索
			 */
			getHistorySearch() {
				return uni.getStorageSync(HISTORY_SEARCH) || [];
			},
			/**
			 * 搜索提交
			 */
			onSearch() {
				const {
					searchValue
				} = this;
				const {
					targetPage
				} = this.options;

				if (!targetPage) {
					this.$app.toast('targetPage参数错误' + targetPage);
					return;
				}

				if (!searchValue) {
					this.$app.toast('查询字段不能为空');
					return;
				}
				
				if (tooLong(searchValue, 20)) {
					this.setHistory(searchValue);
					this.$app.navTo(targetPage, {
						searchName: searchValue
					});
				} else {
					this.$app.toast('输入的关键字过长');
				}
			},
			/**
			 * 记录历史搜索
			 */
			setHistory(searchValue) {
				const data = this.getHistorySearch();
				const index = data.indexOf(searchValue);
				index > -1 && data.splice(index, 1);
				data.unshift(searchValue);
				this.historySearch = data;
				this.onUpdateStorage();
			},
			/**
			 * 清空输入内容
			 */
			clearInput(){
				this.searchValue = ""
			},
			/**
			 * 清空最近搜索记录
			 */
			clearSearch() {
				this.historySearch = [];
				this.onUpdateStorage();
			},
			/**
			 * 更新历史搜索缓存
			 * @param {Object} data
			 */
			onUpdateStorage(data) {
				uni.setStorageSync(HISTORY_SEARCH, this.historySearch);
			},
			/**
			 * 跳转到最近搜索
			 */
			handleQuick(searchName) {
				const {
					targetPage
				} = this.options;
				if (targetPage) {
					this.$app.navTo(targetPage, {
						searchName
					});
				} else {
					this.$app.toast('targetPage参数错误' + targetPage);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	.calce-button{
		width: 80rpx;
		margin: 20rpx;
		font-size: 30rpx;
	}
	.search-input-wrapper {
		display: flex;
		    justify-content: center;
		    align-items: center;
		    background-color: white;
		    padding-top: 2rpx;
		    width: 100%;
		    margin-left: 20rpx;
		    border-radius: 80rpx;
		    background-color: #F6F6F6;

		// /deep/ input {
		// 	background-color: #F6F6F6;
		// 	border-radius: 0rpx 80rpx 80rpx 0rpx;
		// }

		// /deep/ text {
		// 	background-color: #F6F6F6;
		// 	border-radius: 80rpx 0rpx 0rpx 80rpx;
		// }
	}

	// 最近搜索
	.history {
		background-color: $uni-bg-color;
		padding: 24rpx 32rpx;
		
		height: 100vh;
		.his-head {
			// padding: 50rpx 0 0 0;
			// font-size: $uni-font-size-base;
			// color: $uni-text-color-placeholder;
			
		}

		.his-list {
			background-color: $uni-bg-color;
			padding: 20rpx 12rpx;
			overflow: hidden;

			.his-item {
				width: 33.3%;
				float: left;
				padding: 10rpx;
				box-sizing: border-box;

				.history-button {
					text-align: center;
					padding: 8rpx 14rpx;
					line-height: 44rpx;
					border-radius: 100rpx;
					background:  #F4F4F4;
					font-size: $uni-font-size-base;
					// border: 1rpx solid #c8c7cc;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>